{% extends "base.html" %}
{% load i18n %}
{% block title %} Tu Negocio Empresarios - Editar Empresario{% endblock %}
{% block head-css-ext %}
  <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/layout.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/jquery-ui.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/ui.datepicker.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/forms.css" media="screen" />
{% endblock %}

{% block head-js-ext %}
  <!-- jQuery -->
  <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.js"></script>
  <script type="text/javascript" src="{{MEDIA_URL}}js/jquery-ui.js"></script>
  <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.ui.datepicker-es.js"></script>
  <!--[if IE]><script type="text/javascript" src="{{MEDIA_URL}}js/jquery.bgiframe.js"></script><![endif]-->
{% endblock %}

{% block head-js-embedded %}
  <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
	  
	  var year = new Date().getFullYear();
	  var depto = {{ depto }};
      var ciudad = {{ ciudad }};
	  
	  $("input:submit", ".enviar").button();
	  
	  $("#datepicker").datepicker({
		firstDay: 0,
        dateFormat: 'yy-mm-dd',
        yearRange: '1900' + ':' + year, 
        changeMonth: true,
        changeYear: true,
        showOn: 'button',
        buttonImage: '{{MEDIA_URL}}img/calendar.gif',
        buttonImageOnly: true,
        showButtonPanel: true,
		maxDate : new Date()
      });
	  
	  $("select#departamento option[value="+ depto +"]").attr("selected", true);
	  
	  $.getJSON("/ajax/buscarciudad/" + depto + "/", function(j){
		if (j.length == 0)
		{
		  var options = '<option value="">----------</option>';
        }
        else
        {
          var options = '';                
          for (var i = 0; i < j.length; i++)
          {
            options += '<option value="' + parseInt(j[i].pk) + '">' + j[i].fields['nombre'] + '</option>';
          }
        }
        $("#ciudad").html(options);
        $("#ciudad option[value=" + ciudad + "]").attr("selected", true);
      });
	  
	  $("select#departamento").change(function(){
		$.getJSON("/ajax/buscarciudad/" + $(this).val() + "/", function(j){
		  if (j.length == 0)
          {
            var options = '<option value="">----------</option>';
          }
          else
          {
            var options = '';                
            for (var i = 0; i < j.length; i++)
            {
              options += '<option value="' + parseInt(j[i].pk) + '">' + j[i].fields['nombre'] + '</option>';
            }
          }
          $("#ciudad").html(options);
        });
      });
	  
    });
  </script>
{% endblock %}

{% block content-box1 %}
  <form method="post" action=".">{% csrf_token %}
	<table>
	  <tr>
	    <td><label for="id_nombre">Nombre:</label>{% if form.nombre.errors %} <div class="error">{{ form.nombre.errors|join:", " }}</div>{% endif %}</td>
	    <td>{{ form.nombre }}</td>
	  </tr>
	  <tr>
	    <td><label for="id_apellido">Apellido:</label>{% if form.apellido.errors %} <div class="error">{{ form.apellido.errors|join:", " }}</div>{% endif %}</td>
	    <td>{{ form.apellido }}</td>
	  </tr>
	  <tr>
	    <td><label for="id_email">Email:</label>{% if form.email.errors %} <div class="error">{{ form.email.errors|join:", " }}</div>{% endif %}</td>
	    <td>{{ form.email }}</td>
	  </tr>    
	  <tr>
	    <td><label for="Departamento">Departamento:</label>{% if form.departamento.errors %} <div class="error">{{ form.departamento.errors|join:", " }}</div>{% endif %}</td>
	    <td>{{ form.departamento }}</td>
	  </tr>
	  <tr>
	    <td><label for="Ciudad">Ciudad:</label>{% if form.ciudad.errors %} <div class="error">{{ form.ciudad.errors|join:", " }}</div>{% endif %}</td>
	    <td>{{ form.ciudad }}</td>
	  </tr>
	  <tr>
	    <td><label for="id_telefono">Telefono:</label>{% if form.telefono.errors %} <div class="error">{{ form.telefono.errors|join:", " }}</div>{% endif %}</td>
	    <td>{{ form.telefono }}</td>
	  </tr>
	  <tr>
	    <td><label for="id_movil">Celular:</label>{% if form.movil.errors %} <div class="error">{{ form.movil.errors|join:", " }}</div>{% endif %}</td>
	    <td>{{ form.movil }}</td>
	  </tr>
	  <tr>
		<td><label for="id_fecha_nacimiento">Fecha Nacimiento:</label>{% if form.fecha_nacimiento.errors %} <div class="error">{{ form.fecha_nacimiento.errors|join:", " }}</div>{% endif %}</td>
	    <td>{{ form.fecha_nacimiento}}</td>
	  </tr>    
	</table>
	<br>
	<div align="center" class="enviar" >
	  <input type="submit" value="Editar Cliente" />
	</div>
  </form>
{% endblock %}

{% block content-colum2 %}
  {% if user.is_authenticated %}
    <ul>
      <li><a href="{% url index %}">{% trans "Home" %}</a></li>
	  <li><a href="{% url empresarios %}">Empresarios</a></li>
	  <li><a href="{% url listar_empresarios %}">Listar Empresarios</a></li>
    </ul>
  {% endif %}   
{% endblock %}